<template>
	<view class="mm">
		<view class="status_bar"></view>
		<view class="fui-content">
			<view class="fui-cell-group">
				<view class="fui-title">云店名称</view>
				<view class="fui-input"><input type="text" placeholder="请输入云店名称" id="shopname" v-model="shop.merchname" /></view>
			</view>
			<view class="fui-cell-group">
				<view class="fui-title">店招背景</view>
				<view class="flex">
					
					<view class="fui-img fui-img-null" @click="chooseImage">
						<text class="icon icon-cameraadd"></text>
						<view>上传照片</view>
					</view>

					<view class="fui-img" v-if="shop.logo">
						<image :src="shop.logo" class="image round" mode="widthFix" id="showlogo" @click="chooseImage"></image>
					</view>
				</view>
			</view>
			<view class="fui-cell-group">
				<view class="fui-title">云店公告</view>
				<view class="fui-input"><textarea maxlength="100" placeholder="请输入关于店铺的描述(100字以内)" id="shopdesc" v-model="shop.desc"></textarea></view>
			</view>
			<view class="fui-cell-group">
				<view class="fui-title">联系人</view>
				<view class="fui-input"><input type="text" placeholder="请输入联系人" id="realname" v-model="shop.realname"></view>
			</view>
			<view class="fui-cell-group">
				<view class="fui-title">联系电话</view>
				<view class="fui-input"><input type="text" placeholder="请输入联系电话" id="mobile" v-model="shop.mobile"></view>
			</view>
			<view class="fui-cell-group">
				<view class="fui-title">云店分类</view>
				<view v-for="(item,index) in shop.sortlist" :key="index">
					<view class="fui-input flex sort">
						<input type="text" placeholder="分类一:热销单品" v-model="shop.sortlist[index].name" />
						<view class="fui-img fui-img-null" @click="chooseStore(index)" >
							<image v-if="shop.sortlist[index].thumb" :src="shop.sortlist[index].thumb" mode="widthFix" class="photo"></image> 
							<text v-else class="icon icon-cameraadd"></text>
						</view>
						<text class="icon icon-wrong" @click="delsort(index)"></text>
					</view>
				</view>
				<view class="btn-sm" @click="addsort">添加分类</view>
			</view>

			<view class="btn" id="btn-submit" @click="save">保存更改</view>
		</view>
		<view class="bstatus_bar"></view>
		<menus :mnav="1"></menus>
	</view>
</template>

<script>
	var t = getApp().globalData,
		e = t.requirejs('core'),
		i = t.requirejs('foxui'),
		a = t.requirejs('jquery');
	export default {
		data() {
			return {
				shop: {
					sortlist: [{
						name: '',

					}],

				},


			}
		},
		onUnload() {
			this.shoplogo = '';
		},
		onLoad() {
			var s = this
			e.get('merchmanage.shop', {}, function(r) {
				console.log(t);
				if (r.status == 1) {
					s.shop = r.result.shop
				} else {
					uni.showToast({
						title: '讀取失败',
						icon: "none",
						duration: 2000
					});
				}
			});
			if (!s.shop.sortlist) {
				s.shop = {
					sortlist: [{
						name: '',

					}]
				}
			}

		},
	
		methods: {
			// 添加分类
			addsort() {
				this.shop.sortlist.push({
					name: ''
				});
			},
			delsort(index) {
				this.shop.sortlist.splice(index, 1);
			},
			//联系电话校验
			validatePhone(val) {
				var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //手机号码
				var isMob = /^0?1[3|4|5|8][0-9]\d{8}$/; // 座机格式
				if (isMob.test(val) || isPhone.test(val)) {
					return true;
				} else {
					return false;
				}
			},
			//保存设置
			save() {
				let data = {},
					self = this,
					classState = 0
				data.shoplogo = this.shop.logo
				data.shopname = this.shop.merchname
				data.shopdesc = this.shop.desc
				data.realname = this.shop.realname
				data.mobile = this.shop.mobile
				data.sortlist = this.shop.sortlist

				if (data.mobile != '' && this.validatePhone(data.mobile) == false) {
					uni.showToast({
						title: '联系电话填写有误',
						icon: "none",
						duration: 2000
					});
					return false;
				}

				if (data.sortlist.length < 1) {
					return uni.showToast({
						title: '至少添加一个分类',
						icon: "none",
						duration: 2000
					});

				}
				Object.keys(data.sortlist).map(item => {
					if (data.sortlist[item]['name'] == '') {
						classState = 1
						return;
					}

				})

				if (classState) {
					return uni.showToast({
						title: '分类不能为空',
						icon: "none",
						duration: 2000
					});
				}

				//店铺保存到后台
				// merchmanage.shop
				e.post('merchmanage.shop', data, function(tt) {
					if (tt.status == 1) {
						t.setCache('user_shop', self.shop);
						uni.showToast({
							title: '保存成功',
							icon: "none",
							duration: 2000
						});

					} else {
						uni.showToast({
							title: '保存失败',
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			//退出登录
			end() {
				uni.showModal({
					title: '提示',
					content: '当前已登录，确认要退出吗？',
					success: function(res) {
						if (res.confirm) {
							t.setCache('user_shop', '');
							t.setCache('user_token', '');
							uni.navigateTo({
								url: "../login/login"
							})
						}
					}
				});

			},
			//分类图片上传
			chooseStore(index){
				let s=this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: t.api+'&r=util.uploader.upload',
							filePath: imageSrc,
							name:'file',
							fileType:'image',
							success: (res) => {
								let data=JSON.parse(res.data);
								//s.userShop.sortlist[index].thumb=data.files[0].url
								this.$set(s.shop.sortlist[index],'thumb',data.files[0].url);
					
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},	
			chooseImage: function() {
				let s = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: t.api + '&r=util.uploader.upload',
							filePath: imageSrc,
							name: 'file',
							fileType: 'image',
							success: (res) => {
								let data = JSON.parse(res.data);
								s.shop.logo = data.files[0].url

							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.fui-header {
		background: #fff;
	}

	.fui-header uni-navigator,
	.fui-header .title {
		color: #000;
	}

	.fui-title {
		color: #333;
	}

	.fui-input {
		padding: 0 30rpx;
		position: relative;
	}

	.fui-input input,
	.fui-input textarea {
		line-height: 60rpx;
		padding: 0 20rpx;
		background: #f2f2f2;
		border-radius: 10rpx;
	}

	.fui-input input {
		height: 60rpx;
		margin-bottom: 20rpx;
	}

	.fui-input textarea {
		height: 180rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.fui-input.flex {
		justify-content: space-between;
		align-items: center;
	}

	.fui-input.flex input {
		width: 82%;
	}

	.fui-input.flex .icon-wrong {
		display: inline-block;
		width: 60rpx;
		margin-left: 20rpx;
	}

	.btn-sm {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 20rpx auto;
		background: #000;
		border-radius: 40rpx;
		color: #fff;
	}

	.btn {
		display: block;
		width: 85vw;
		margin: 40rpx auto !important;
		background: #000;
		border-radius: 40rpx;
		color: #fff;
	}

	.fui-img {
		width: 200rpx;
		height: 200rpx;
		margin-left: 30rpx;
	}

	.fui-img-null {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #f2f2f2;
		border-radius: 10rpx;
	}

	.fui-img-null view {
		color: #999;
		margin-top: 20rpx;
	}
	.icon-cameraadd{
		font-size: 60rpx;
	}
	/* 分类图片 */
	.sort{
		margin-bottom: 20rpx;
	}
	.sort.fui-input.flex input{
		margin-bottom: 0;
	}
	.sort .fui-img{
		width: 60rpx;
		height: 60rpx;
		padding: 5rpx;
	}
	.sort .icon-cameraadd{
		font-size: 32rpx;
	}
	.sort .photo{
		width: 60rpx;
	}
</style>
